import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcssPxToViewport from 'postcss-px-to-viewport'
import monacoEditorPlugin from 'vite-plugin-monaco-editor'
import VueDevTools from 'vite-plugin-vue-devtools'
import ViteMonacoPlugin from 'vite-plugin-monaco-editor'

import { resolve } from 'path';
// https://vite.dev/config/
const viteConfig = defineConfig(({mode}) => {
  const env = loadEnv(mode, process.cwd())
  const envMode = env.VITE_APP_ENV || mode;

  return {
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], // 添加扩展名支持

  },
  css: {
    postcss: {
        plugins: [
            postcssPxToViewport({
                viewportWidth: 1920,
                unitToConvert: "PX", //只针对PX单位进行转换vw单位转换
            })
        ]
    }
},
  plugins: [vue(),(monacoEditorPlugin as any).default({
    languageWorkers:['editorWorkerService', 'json']
  }),VueDevTools()],
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
        output: {
            chunkFileNames: 'assets/js/[name]-[hash].js',
            entryFileNames: 'assets/js/[name]-[hash].js',
            assetFileNames: 'assets/[ext]/[name]-[hash].[ext]'
        }
    }
},
esbuild: {
    drop: mode ===  'development' || mode === 'dev' ? [] : ['debugger']
}
  }
})

export default viteConfig